<template>
  <div class="file__item">
    <!-- 底层展示图片或文件类型图标 -->
    <div class="file__item-back">
      <template v-if="fileInfo.type === 'image' && file.url">
        <el-image class="img" ref="imageRef" :src="file.url" :preview-src-list="[file.url]"/>
        <!--<img class="img" :src="file.url" alt="" v-if="fileInfo.type === 'image' && file.url"/>-->
      </template>

      <img class="icon" :src="fileInfo.icon" alt="" v-else/>
    </div>

    <!-- 上传进度 -->
    <div class="file__item-uploading" v-if="file.status === 'uploading'">
      <div class="file-name">{{file.name}}</div>
      <el-progress text-color="#000" color="#409eff" :type="progressType" :percentage="file.percentage | numFormatter" :width="size === 'small'?100:126" />
    </div>
    <div class="file__item-name" v-else>
      <div class="file-name">{{file.name}}</div>
    </div>

    <!-- 结果状态 -->
    <div class="file__item-status">
      <label class="file__item-status-label" v-if="file.status === 'success'">
        <i class="icon el-icon-check"></i>
      </label>
      <label class="file__item-status-label fail" v-if="file.status === 'fail'">
        <i class="icon el-icon-plus"></i>
      </label>
    </div>

    <!-- 可操作按钮 -->
    <div class="file__item-actions" :title="file.name">
      <span @click="handlePreview" v-if="canPreview"><i class="el-icon-zoom-in" title="预览"></i></span>
      <span @click="handleDownload" v-if="canDownload"><i class="el-icon-download"></i></span>
      <span @click="handleRemove" v-if="canRemove"><i class="el-icon-delete"></i></span>
    </div>

  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getFileInfo } from '@/utils/tools/url'

export default {
  name: 'FileItem',
  props: {
    file: {
      type: Object,
      default: function() {
        return {}
      }
    },
    disabled: Boolean,
    disabledDownLoad: Boolean, // 禁用状态是否显示下载
    size: String,
    progressType: String, //进度条类型
  },
  computed: {
    fileInfo() {
      return getFileInfo(this.file.name)
    },
    canPreview() {
      const previewList = ['image', 'txt', 'pdf', 'excel', 'word', 'video', 'audio']
      return previewList.includes(this.fileInfo.type) && this.file.status === 'success'
    },
    canDownload() {
      return this.file.status === 'success' && (!this.disabled || this.disabled && this.disabledDownLoad)
    },
    canRemove() {
      return !this.disabled
    }
  },
  filters: {
    numFormatter(val) {  // 格式化进度
      return Math.round(parseFloat(val)*10)/10
    }
  },
  methods: {
    handlePreview() { // 预览
      const type = this.fileInfo.type
      if (type === 'image' && this.$refs.imageRef) {
        this.$refs.imageRef.clickHandler()
      }  else if (['image', 'pdf', 'txt', 'video', 'audio'].includes(type)) {
        window.open(this.file.url)
      }
    },
    handleDownload() {  // 下载
      saveAs(this.file.url, this.file.name)
    },
    handleRemove() { // 删除
      this.$emit('remove', this.file)
    }
  }
}
</script>

<style lang="scss" scoped>
.full {
  width: 100%;
  height: 100%;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
  @extend .full;
}
.file__item {
  @extend .full;
  border: 1px solid #c0ccda;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  .file-name {
    font-size: 12px;
    line-height: 15px;
    color: #333;
    max-height: 60px;
    overflow: hidden;
    display: none;
  }
  &-back {
    @extend .full;
    @extend .flex-center;
    z-index: 1;
    padding: 2px;
    .img {
      @extend .full;
      object-fit: contain;
      ::v-deep img {
        object-fit: contain;
      }
    }
    .icon {
      width: 60%;
      object-fit: contain;
    }
  }
  &-status {
    @extend .absolute;
    z-index: 5;
    &-label {
      position: absolute;
      line-height: 24px;
      right: -15px;
      top: -6px;
      width: 40px;
      height: 24px;
      background: #13ce66;
      text-align: center;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
      &.fail {
        background: #FF0000;
      }
      .icon {
        font-size: 12px;
        margin-top: 10px;
        font-weight: 700;
        color: #fff;
        &.el-icon-check {
          transform: rotate(-45deg);
        }
      }
    }
  }
  &-uploading {
    @extend .absolute;
    z-index: 10;
    background: rgba(255, 255, 255, .5);
    ::v-deep .el-progress--circle {
      @extend .flex-center;
      height: 100%;
    }
  }
  &-actions {
    @extend .absolute;
    z-index: 20;
    padding: 0 10%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      display: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    &:hover {
      background: rgba(0, 0, 0, .5);
      span {
        display: inline-block;
      }
    }
  }
}

//text类型 左侧图片右侧名称
.el-upload-list--text {
  .file__item {
    padding: 5px 10px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-back {
      width: 70px;
      height: 70px;
      border: 1px solid #eee;
      flex-shrink: 0;
      margin-right: 10px;
    }
    &-name {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: flex-start;
      .file-name {
        max-height: 45px;
        display: block;
      }
    }
    &-uploading {
      padding: 2px 0;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;
      flex-direction: column;
      .file-name {
        display: block;
        max-height: 30px;
        margin-bottom: 2px;
      }
    }
    &-actions {
      justify-content: center;
      span {
        padding: 0 15px;
      }
    }
    ::v-deep .el-progress--line {
      position: relative;
      top: 0;
      @extend .flex-center;
    }
    ::v-deep .el-progress--line .el-progress__text {
      flex-shrink: 0;
      position: relative;
      top: 0;
      min-width: 40px;
      text-align: right;
      font-size: 12px !important;
    }
  }
}
</style>
